<template>
    <div>
        <div class="hotel-logo">
            <img src="../../assets/images/logo.png" height="90" width="175"/>
            <span>期待你的声音</span>
        </div>
        <div class="normal-problem">
            <p>常见问题</p>
            <ul>
                <li>很难拨通客服电话</li>
            </ul>
        </div>
        <div class="callus">
            <p><i class="el-icon-service"></i>服务热线：</p>
            <span>19184559623</span>
        </div>
        <div class="your">
            <textarea type="text" placeholder="反馈问题"></textarea>
            <p><i class="el-icon-s-custom"></i>:大家可以尽情吐槽页面问题！ 反馈缺陷，我们会第一时间解决</p>
            <button type="submit">提交我的问题</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'problem'
    }
</script>

<style scoped>
    .hotel-logo{
        height: 100px;
        background: white;
        box-shadow:0 2px 12px 0 rgba(0, 0, 0, 0.1);
        text-align: left;

    }
    .hotel-logo img{
        margin-left: 200px;
    }
    .hotel-logo span{
        float: right;
        margin: 50px 300px 0 0;
        color: #0085d0;
        font-size: 28px;
    }
    .normal-problem{
        border: 1px solid gray;
        width: 600px;
        height: 100px;
        margin: 50px 0 0 350px;
        border-radius: 5px;
    }
    .callus{
        border-radius: 5px;
        width: 200px;
        height: 100px;
        border: 1px solid gray;
        display: inline-block;
        float: right;
        margin: -103px 340px 0 0;
    }
    .callus i{
        font-size: 18px;
        margin-right: 10px;
        font-weight: bold;
    }
    .callus span{
        line-height: 60px;
        display: inline-block;
        margin-left: 50px;
    }
    p{
        border-bottom: 1px solid gray;
        height: 40px;
        line-height: 40px;
        font-weight: bold;
        text-align: left;
        text-indent: 10px;
    }
    ul li::marker{
        color: #726f6f;
    }
    li{
        text-indent: 30px;
        text-align: left;
        line-height: 60px;
        list-style-position: inside;
    }
    .your{
        width: 600px;
        height: 330px;
        border: 1px solid black;
        margin: 30px 0 0 350px;
        border-radius: 5px;
    }
    .your textarea{
        border: none;
        outline:medium;
        width:600px;
        height: 180px;
        border-radius: 5px;
        margin-top: 20px;
        text-indent: 20px;
    }
    .your button{
        margin:20px 0 0 250px;
        height: 35px;
        width: 120px;
        border: none;
        background: #056da1;
        color: white;
    }
    .your p{
        text-align: center;
        font-weight:normal;
        font-size: 14px;
        border: none;
    }
</style>